<?xml version='1.0' encoding='UTF-8' ?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://xmlns.jcp.org/jsf/html"
      xmlns:ui="http://xmlns.jcp.org/jsf/facelets"
      xmlns:f="http://xmlns.jcp.org/jsf/core"
      xmlns:p="http://primefaces.org/ui">

    <ui:composition template="/template.xhtml">        
        <ui:define name="title">
            <h:outputText value="#{ruta.NuevaRuta}"></h:outputText>
        </ui:define>
        <ui:define name="body">            

            <h:form id="frmCrearSocio">                

                <p:growl id="msgs" showDetail="true" />

                <p:panel header="Nueva Ruta" style="font-size: x-small; background: white">
                    <table width="100%" border="0">
                        <tr>
                            <th colspan="6" align="center" scope="row">Parámetros Iniciales</th>
                            <td/>
                            <td/>
                            <td width="500" rowspan="10" align="center">
                                <div align="right">
                                    <p:graphicImage width="250" height="250" url="../img/ico/ruta/nuevo.jpg"/>                                                                  
                                </div>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="3" align="right" scope="row">
                                <p:outputLabel for="txtCodigo" value="#{ruta.Codigo}"/>
                            </th>
                            <td colspan="3">
                                <p:inputText id="txtCodigo" value="#{rutaController.selected.codigo}" title="#{ruta.Codigo}" required="true" requiredMessage="#{ruta.CampoCodigo}" size="30"/>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="3" align="right" scope="row">
                                <p:outputLabel for="txtNombre" value="#{ruta.Nombre}"/>
                            </th>
                            <td colspan="3">
                                <p:inputText id="txtNombre" value="#{rutaController.selected.nombre}" title="#{ruta.Nombre}" required="true" requiredMessage="#{ruta.CampoNombre}" size="30"/>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="3" align="right" scope="row">
                                <p:outputLabel for="txtDistancia" value="#{ruta.Distancia}"/>
                            </th>
                            <td colspan="3">
                                <p:inputText id="txtDistancia" value="#{rutaController.selected.distancia}" title="#{ruta.Distancia}" required="true" requiredMessage="#{ruta.CampoDistancia}" size="30"/>
                            </td>
                        </tr>

                        <tr>
                            <th colspan="6" scope="row">&nbsp;</th>
                        </tr>
                        <tr>
                            <th colspan="6" scope="row">Tipo de Día</th>
                        </tr>
                        <tr>
                            <th colspan="2" align="center" scope="row">Ordinario</th>
                            <th colspan="2" align="center" scope="row"><p>Sábado</p></th>
                            <th colspan="2" align="center" scope="row"><p>Domingo</p></th>
                        </tr>
                        <tr>
                            <th width="102" scope="row">
                                <p:outputLabel for="time1" value="#{ruta.InicioHora}"/>
                            </th>
                            <td width="180">
                                <p:calendar id="time1" value="#{rutaController.selected.inicioHoraOrd}" 
                                            required="true" requiredMessage="#{ruta.CampoHoraInicia}"
                                            pattern="HH:mm" size="29" timeOnly="true"
                                            locale="es"/>
                            </td>
                            <th width="102" scope="row">
                                <p:outputLabel for="time2" value="#{ruta.InicioHora}"/>
                            </th>
                            <td width="180">
                                <p:calendar id="time2" value="#{rutaController.selected.inicioHoraSab}" 
                                            required="true" requiredMessage="#{ruta.CampoHoraInicia}"
                                            pattern="HH:mm" size="29" timeOnly="true"
                                            locale="es"/>
                            </td>
                            <th width="102" scope="row">
                                <p:outputLabel for="time3" value="#{ruta.InicioHora}"/>
                            </th>
                            <td width="180">
                                <p:calendar id="time3" value="#{rutaController.selected.inicioHoraDom}" 
                                            required="true" requiredMessage="#{ruta.CampoHoraInicia}"
                                            pattern="HH:mm" size="29" timeOnly="true"
                                            locale="es"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <p:outputLabel for="time4" value="#{ruta.FinHora}"/>
                            </th>
                            <td>
                                <p:calendar id="time4" value="#{rutaController.selected.finHoraOrd}" 
                                            required="true" requiredMessage="#{ruta.CampoHoraFin}"
                                            pattern="HH:mm" size="29" timeOnly="true"/>
                            </td>
                            <th scope="row">
                                <p:outputLabel for="time5" value="#{ruta.FinHora}"/>
                            </th>
                            <td>
                                <p:calendar id="time5" value="#{rutaController.selected.finHoraSab}"
                                            required="true" requiredMessage="#{ruta.CampoHoraFin}"
                                            pattern="HH:mm" size="29" timeOnly="true"/>
                            </td>
                            <th scope="row">
                                <p:outputLabel for="time6" value="#{ruta.FinHora}"/>
                            </th>
                            <td>
                                <p:calendar id="time6" value="#{rutaController.selected.finHoraDom}" 
                                            required="true" requiredMessage="#{ruta.CampoHoraFin}"
                                            pattern="HH:mm" size="29" timeOnly="true"/>
                            </td>
                        </tr>
                        <tr>
                            <th scope="row">
                                <p:outputLabel for="txtUnidades1" value="#{ruta.NroUnidades}"/>
                            </th>
                            <td>
                                <p:inputText id="txtUnidades1" value="#{rutaController.selected.numBusesOrd}" 
                                             title="#{ruta.Distancia}" required="true" 
                                             requiredMessage="#{ruta.CampoNumUnidades}" size="29"/>
                            </td>
                            <th scope="row">
                                <p:outputLabel for="txtUnidades2" value="#{ruta.NroUnidades}"/>
                            </th>
                            <td>
                                <p:inputText id="txtUnidades2" value="#{rutaController.selected.numBusesSab}" 
                                             title="#{ruta.Distancia}" required="true" 
                                             requiredMessage="#{ruta.CampoNumUnidades}" size="29"/>
                            </td>
                            <th scope="row">
                                <p:outputLabel for="txtUnidades3" value="#{ruta.NroUnidades}"/>
                            </th>
                            <td>
                                <p:inputText id="txtUnidades3" value="#{rutaController.selected.numBusesDom}"
                                             title="#{ruta.Distancia}" required="true" 
                                             requiredMessage="#{ruta.CampoNumUnidades}" size="29"/>
                            </td>
                        </tr>
                        <tr>
                            <th colspan="6" scope="row">&nbsp;</th>
                        </tr>
                        <tr>
                            <th colspan="6" scope="row">
                                <p:commandButton ajax="false" action="#{rutaController.crearRuta()}" value="Guardar"/>
                            </th>
                        </tr>
                    </table>
                    <div style="font-size: small" align="right">
                        * Campos Obligatorios
                    </div>
                    <div align="left" style="font-size: small">                        
                        <h:link outcome="Index" value="#{ayudante.RegresarIndex}" />
                    </div>      
                </p:panel>                             
            </h:form>
        </ui:define>
    </ui:composition>
</html>

